<template>
	<view class="help-log-list-wrap h-270px overflow-hidden">
		<view v-if="!logList?.length">
			暂无参与人数
		</view>
		<template v-else>
			<view class="flex flex-wrap">
				<view class="log-list-item w-1-5 mb-20px flex flex-y flex-x-center flex-y-center"
					:class="{ 'up-animation': isAnimate }" v-for="(item,index) in logList" :key="index">
					<uv-avatar :src="item.avatarUrl" :size="40"></uv-avatar>
					<text class="text-name">{{item.nickName}}</text>
					<!-- <uv-text mode="name" :text="item.name" format="encrypt"></uv-text> -->
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "Scroll",
		props: {
			/*
			 * 可接受传参
			 * data          列表数据
			 * height        列表高度,默认值：200
			 * showNumber    可视的条目数，默认值：5
			 * speed         轮播速度，默认值：1000
			 * */
			//列表数据
			dataList: {
				type: Array,
				default: () => [],
			},
			//列表高度,默认值：200
			height: {
				type: [Number, String],
				default: 200
			},
			//可视的条目数，默认值：2
			showNumber: {
				type: [Number, String],
				default: 10
			},
			//轮播速度，默认值：3000
			speed: {
				type: [Number, String],
				default: 3000
			}
		},
		data() {
			return {
				//是否开启动画
				isAnimate: false,
				//记录列表
				logList: [...this.dataList],
				//定时器
				timer: null,
			}
		},

		mounted() {
			this.startMessageTimer()
		},
		methods: {
			//开启消息轮询定时器
			startMessageTimer() {
				//列表数据少于三条就不滚动了
				if (this.timer || !this.logList.length || this.logList.length <= this.showNumber) {
					return
				}
				//每隔3秒钟滚动一次
				this.timer = setInterval(() => {
					//1.开启动画之后，这个时候列表就向上滚动了
					//2.在等待每次滚动时间差不多到的时候，把最前面的数据放到列表最后，这样就能循环滚动了
					//3.最后再关闭动画，等待下次再开启动画，这样就形成了循环滚动的效果了 
					this.isAnimate = true
					setTimeout(() => {
						//操作记录列表
						let firstItem = this.logList.splice(0, 5)
						//关闭动画
						this.isAnimate = false
						setTimeout(() => {
							//添加到最后
							this.logList.push(...firstItem)
						}, 100)
					}, 500)
				}, this.speed)
			},
		},

	};
</script>

<style scoped>
	.up-animation {
		animation-name: upAni;
		animation-duration: 1s;
	}

	@keyframes upAni {
		0% {
			transform: translateY(0rpx);
		}

		100% {
			transform: translateY(-135rpx);
		}
	}
	.help-log-list-wrap{
		width: 100%;
	}
	
	.text-name{
			width: 40px; /* 定义容器宽度 */
		  white-space: nowrap; /* 确保文本在一行内显示 */
		  overflow: hidden; /* 超出容器部分隐藏 */
		  text-overflow: ellipsis; /* 超出部分显示省略号 */
	}
</style>